<template>
  <div id="box22">
    <div class="scroll_box" @scroll="handleScroll">
      <div class="item mar"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item mar"></div>
    </div>
  </div>
</template>

<script>
import autofit from "autofit.js";
export default {
  data() {
    return {
      // 初始化状态变量
      isScrolling: false,
      scrollTop: 0
    };
  },
  mounted() {
    autofit.init(
      {
        designHeight: '100vh',
        designWidth: 1920,
        renderDom: "#box22",
        resize: true
      },
      false
    );

  },
  methods: {
    handleScroll(e) {
      console.log(444);
      this.scrollTop = e.target.scrollTop;
      if (!this.isScrolling) {
        // 开始滚动时设置为true，避免滚动过程中重复触发
        this.isScrolling = true;
        // 调用防抖函数，执行回调函数
        this.debounce(this.handleScrollEnd, 1000)();
      }
    },
    handleScrollEnd() {
      console.log("滚动结束，当前滚动位置：", this.scrollTop);
      // 滚动结束后将状态设回false，准备下一次滚动
      this.isScrolling = false;
    },
    debounce(fn, delay) {
      let timerId;
      return function(...args) {
        // 如果定时器还存在，清除定时器
        if (timerId) {
          clearTimeout(timerId);
        }
        // 注册新的定时器，延迟执行回调函数
        timerId = setTimeout(() => {
          fn.apply(this, args);
        }, delay);
      };
    }
  }
};
</script>

<style scoped>
.scroll_box {
  height: 90vh;
  overflow-y: auto;
}
.item {
  height: 500px;
  width: 400px;
  margin: 30px auto;
  background: blue;
}
.mar {
  margin: 0 auto;
}
</style>